<!--新增订单-->
<template>
    <div class="order-add-root">
        <el-dialog
                title="添加订单"
                :visible.sync="dialogVisible"
                :close-on-click-modal="false"
                width="70%"
                :close="close"
                :before-close="close">

            <!--订单表单-->
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="订单总价">
                    <span class="orderPrice">{{form.orderPrice}}</span> 元
                </el-form-item>
                <el-form-item label="订单价格">
                    <span>{{form.total}}</span> 元
                </el-form-item>
                <el-form-item label="折扣">
                    <el-input-number v-model="form.discount" @change="doDiscount(form.discount)" :precision="2" size="small" :min="0.00" :step="0.5" :max="9.90"></el-input-number>
                    <span>&nbsp;&nbsp;折  (0 表示不打折)</span>
                </el-form-item>
                <el-form-item label="商品">
                    <el-button type="success" @click="selectGoods(null)">选择商品</el-button>
                    <div v-if="form.orderGoodsDTOList.length > 0">
                        <el-card class="box-card" v-for="(item, i) in form.orderGoodsDTOList" :key="i">
                            <span style="float: right; padding-right: 10px;">
                                <el-button type="text" icon="el-icon-edit" @click="editSelected(item)">修改</el-button> &nbsp;
                                |<el-button type="text" style="color: red;" icon="el-icon-close" @click="remove(i)">删除</el-button>
                            </span>
                            <div>
                                <div>商品编号： <span>{{item.goodsCode}}</span></div>
                                <div>商品名称： <span>{{item.goodsName}}</span></div>
                                <span>数量：</span>
                                <div class="goods-count-in-order" v-for="(thing, index) in (item.row.filter(i_ => i_.num>0))" :key="index">
                                    <span> {{thing.num}} {{thing.unit}} ; </span> &nbsp;&nbsp;
                                    <span>({{thing.goodsPrice}}元/{{thing.unit}})</span>
                                </div>
                                <div>
                                    价格：<span>{{item.goodsTotal}}</span> 元
                                </div>
                            </div>
                        </el-card>
                    </div>
                    <div v-else>
                        暂无商品
                    </div>
                </el-form-item>
                <el-form-item label="商家">
                    <el-input placeholder="商家" v-model="form.merchants"/>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" placeholder="请输入内容" v-model="form.comment" maxlength="400" show-word-limit/>
                </el-form-item>

            </el-form><!--// 订单表单-->

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addOrder">新增订单</el-button>
                <el-button @click="close">取 消</el-button>
            </span>
        </el-dialog>

        <!--选择商品组件-->
        <SelectGoods v-if="selectGoodsFlag" :order-goods="dataTrans" @close="selectGoods"></SelectGoods>
    </div>
</template>

<script>
import SelectGoods from "./SelectGoods";
import API from '@/api/api';
export default {
    name: "OrderAdd",
    components: {
        SelectGoods,
    },
    data() {
        return {
            //
            dialogVisible: true,
            //
            selectGoodsFlag: false,
            // 用于组件间数据传输
            dataTrans: {},
            // 用于展示
            form: {
                discount: 0.00,
                orderPrice: 0.00,
                // price: 0.00,
                total: 0.00,
                orderGoodsDTOList: [],
                giftList: [],
                comment: '',
                merchants: '',
            },
            //
            goodsTable: {
                orderGoodsDTOList: [],
                giftList: [],
            }
        }
    },
    mounted() {

    },
    methods: {
        //
        close() {
            this.$emit("close");
        },
        //
        selectGoods(val) {
            if (val) { // 判断是新的商品还是修改后的商品
                let isNewGoods = true;
                this.form.orderGoodsDTOList.map(item => {
                    if (item.goodsCode === val.goodsCode) {
                        isNewGoods = false;
                        Object.keys(val).forEach(key => item[key] = val[key]);
                    }
                });
                if (isNewGoods) { // 新商品，加入数组
                    this.form.orderGoodsDTOList.push(val);
                }
                console.log(this.form.orderGoodsDTOList, '添加的商品------------');
            }
            this.calculateOrder();
            this.dataTrans = null;
            this.selectGoodsFlag = !this.selectGoodsFlag;
        },

        // 修改已选择的商品
        editSelected(item) {
            this.dataTrans = item;
            this.selectGoodsFlag = !this.selectGoodsFlag;
        },
        // 计算订单价格
        calculateOrder() {
            if (this.form.orderGoodsDTOList) {
                console.log('~~~~~~~~~~~计算拉！！！！！@@@@@@@@@@');
                let total = 0.00;
                let orderPrice = 0.00;
                let discount = this.form.discount === 0.00? 1:this.form.discount/10.00;

                this.form.orderGoodsDTOList.forEach(item => total += item.goodsTotal);

                orderPrice = total * discount;
                this.form.total = total.toFixed(2);
                this.form.orderPrice  = orderPrice.toFixed(2);
            }
        },
        // 打折
        doDiscount(val) {
            val = val ===  0.00? 1:val/10.00;
            this.form.orderPrice = (this.form.total * val).toFixed(2);
        },
        // 删除商品
        remove (i) {
            this.form.orderGoodsDTOList.splice(i, 1);
            this.calculateOrder();
        },
        // 添加订单
        addOrder() {

            let param = JSON.parse(JSON.stringify(this.form));
            param.orderGoodsDTOList = [];
            this.form.orderGoodsDTOList.forEach(item => {
                item.row.filter(row => row.num>0).forEach(row => {
                    let temp = {
                        goodsCode: '',
                        goodsName: '',
                        count: 0,
                        unitId: '',
                        unit: '',
                        price: 0,
                        total: 0,
                    };
                    Object.keys(row).forEach(key => temp[key]=row[key]);
                    temp.count = row.num;
                    temp.price = (row.num * row.goodsPrice).toFixed(2);
                    temp.total = item.goodsTotal;
                    param.orderGoodsDTOList.push(temp);
                })
            });
            console.log(param, '#############新建订单参数');
            let url = API.order.addOrder;
            this.$post(url, param).then( res => {
                let data = res.data;
                if (data.success) {
                    this.$message.closeAll();
                    this.$message.success("添加成功!");
                    this.close();
                } else {
                    this.$message.error(data.msg);
                }
            }).catch( err => {
                this.$message.error("请求失败");

            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .box-card {
        margin-top: 8px;
    }
    .goods-count-in-order {
        padding-left: 20px;
    }
    .orderPrice {
        color: #ee9e10;
        font-weight: bolder;
        font-size: 35px;
    }
</style>
